<template>
	<view class="content fofa poRel" style="justify-content: space-between;">
		<tabnav title="补充签署方" :col="back"></tabnav>
		<view style="height: 40rpx;"></view>
		<view class="wid90 mar bacFFF borRad20 box1 choicebox">
			<view class="choices" :style="{'background-color': usertype == 1 ? back : '#e4e4e4'}" @click="usertype = 1">
				个人</view>
			<view class="choices" :style="{'background-color': usertype == 2 ? back : '#e4e4e4'}" @click="usertype = 2">
				企业</view>
		</view>
		<view v-if="usertype == 1" class="wid90 mar bacFFF borRad20 box1" style="padding: 10rpx 0;">
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">证件类型</view>
				<picker @change="bindPickerChange" :value="replenish.idCardType" :range="xuanze">
					<view class="hei80 dis disAl disJuB foSi30">
						<view>{{xuanze[replenish.idCardType]}}</view>
						<uni-icons size="25" type="right"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">姓名<text style="color: red;">*</text></view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="replenish.approveName" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">证件号</view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input type="idcard" class="wid100" v-model="replenish.idCardNumber" placeholder="请输入证件号" />
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">手机号<text style="color: red;">*</text></view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input type="tel" class="wid100" v-model="replenish.phoneNumber" placeholder="请输入手机号" />
				</view>
			</view>
		</view>
		<view v-if="usertype == 2" class="wid90 mar bacFFF borRad20 box1" style="padding: 10rpx 0;">
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">企业名称<text style="color: red;">*</text></view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="replenish.organizationName" placeholder="请补充工商执照上的企业名称" />
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">姓名<text style="color: red;">*</text></view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input class="wid100" v-model="replenish.approveName" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="xia"></view>
			<view class="wid90 mar">
				<view style="height: 20rpx;"></view>
				<view class="foSi25" style="color: #6E6E6E;">手机号<text style="color: red;">*</text></view>
				<view class="hei80 dis disAl disJuB foSi30">
					<input type="tel" class="wid100" v-model="replenish.phoneNumber" placeholder="请输入手机号" />
				</view>
			</view>
		</view>
		<view class="wid100 poAbs bacFFF dis disAl disJuC" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" style="height: 125rpx;bottom: 0;">
			<view class="hei80 dis disAl disJuC coFFF borRad10" @click="baocun" style="width: 400rpx;"
				:style="{'background-color':back}">确认并保存</view>
		</view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				paddingBottomHeight: 0,
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				pdfurl: '',
				xuanze: ['居民身份证', '港澳台居民居住证', '港澳居民来往内地通行证'],
				replenish: {
					idCardType: 0,
					approveName: '',
					idCardNumber: '',
					phoneNumber: '',
					approverType: 'INDIVIDUAL',
					organizationName: '',
					isPromoter: 1
				},
				usertype: 1, // 个人=1，企业=2
				signedby_user:{}, // 签署人
			}
		},
		onLoad(option) {
			var replenish = JSON.parse(option.replenish)
			if (replenish) {
				replenish.idCardType = replenish.idCardType == 'ID_CARD' ? 0 : replenish.idCardType ==
					'HONGKONG_MACAO_AND_TAIWAN' ? 1 : 2
				this.replenish = replenish
				console.log(this.replenish)
			} else {
				this.pdfurl = uni.getStorageSync('contract_detail')
				this.replenish.approverType = this.pdfurl.recipients[0].isPromoter ? this.pdfurl.recipients[1]
					.recipientType : this.pdfurl.recipients[0].recipientType
				this.replenish.recipientId = this.pdfurl.recipients[0].isPromoter ? this.pdfurl.recipients[1].recipientId :
					this.pdfurl.recipients[0].recipientId
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		onShow() {
			// 回显
			console.log(uni.getStorageSync('signedby_user'))
			if(uni.getStorageSync('signedby_user')){
				this.replenish = uni.getStorageSync('signedby_user')
				// 身份类型
				if(uni.getStorageSync('signedby_user').idCardType == 'ID_CARD'){
					this.replenish.idCardType = 0
				}
				// 用户类型
				if(uni.getStorageSync('signedby_user').approverType == 'ORGANIZATION'){
					this.usertype = 2
				}else{
					this.usertype = 1
				}
			}
			
		},
		methods: {
			baocun() {
				var that = this
				if (!that.replenish.approveName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return
				}
				if (!that.isValidPhoneNumber(that.replenish.phoneNumber)) {
					uni.showToast({
						title: '手机号错误',
						icon: 'error'
					})
					return
				}
				if (that.usertype == 1) {
					that.replenish.approverType = 'PERSON'
				} else {
					that.replenish.approverType = 'ORGANIZATION'
					if (that.replenish.organizationName == '') {
						uni.showToast({
							title: '请输入企业名称',
							icon: 'error'
						})
						return
					}
				}
				// 校验完毕开始组装数据
				let data = that.replenish
				let initiator = uni.getStorageSync('initiator') // 发起方信息
				
				// 发起人信息
				let initiator_user = {
					approveName: initiator.nickname,
					phoneNumber: initiator.mobile,
					organizationName: initiator.enterprise_name,
					openId: initiator.qzfw_openid,
					organizationOpenId: initiator.organizationOpenId,
					approverType: 'ORGANIZATION', // 固定为企业（因为只有企业可以发起，嘿嘿嘿）
					recipientId: that.generateRandomString(32), // 唯一标识做随机字符串
					isPromoter: 0, // 发起人  0是1否
					// ComponentLimitType: '', // 留空即可
					signComponents: [] // 签署控件，下个页面增加
				}
				console.log('组装的发起人数据')
				console.log(initiator_user)
				let signedby_user = {
					approveName: that.replenish.approveName,
					idCardType: "ID_CARD",
					idCardNumber: "",
					phoneNumber: that.replenish.phoneNumber,
					approverType: that.usertype == 1 ? 'PERSON' : 'ORGANIZATION',
					recipientId: that.generateRandomString(32), // 唯一标识做随机字符串
					isPromoter: "1",
					// ComponentLimitType: "HANDWRITE",
					signComponents: [] // 签署控件，下个页面增加
				}
				if(that.usertype == 2){
					// 企业需要把企业增加进去
					signedby_user.organizationName = that.replenish.organizationName
				}
				uni.setStorageSync('initiator_user',initiator_user)
				uni.setStorageSync('signedby_user',signedby_user)
				uni.navigateBack()
				
			},
			
			
			 generateRandomString(length) {
			  let result = '';
			  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
			  const charactersLength = characters.length;
			  for (let i = 0; i < length; i++) {
			    result += characters.charAt(Math.floor(Math.random() * charactersLength));
			  }
			  return result;
			},
			
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.replenish.idCardType = e.detail.value
			},
			isValidPhoneNumber(phoneNumber) {
				const regex = /^1\d{10}$/;
				return regex.test(phoneNumber);
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F4F3F3;
	}

	.choices {
		width: 45%;

		padding: 15rpx;
		text-align: center;
		border-radius: 20rpx;
		color: #fff;
	}

	.choicebox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx;
		margin-bottom: 30rpx;
		width: 86%;
	}
</style>